<!doctype html>

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Border-image generator</title>
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <div id="container">
      <div id="gallery">
        <div id="image-gallery">
          <img class="image" src="border-image-1.png" data-stateID="border1" />
          <img class="image" src="border-image-2.png" data-stateID="border2" />
          <img class="image" src="border-image-3.png" data-stateID="border3" />
          <img class="image" src="border-image-4.png" data-stateID="border4" />
          <img class="image" src="border-image-5.png" data-stateID="border5" />
          <img class="image" src="border-image-6.svg" data-stateID="border6" />
        </div>
      </div>

      <div id="load-actions" class="group section">
        <div id="toggle-gallery" data-action="hide"></div>
        <div id="load-image" class="button">Upload image</div>
        <input
          id="remote-url"
          type="text"
          placeholder="Load an image from URL" />
        <div id="load-remote" class="button"></div>
      </div>

      <div id="general-controls" class="group section">
        <div class="name">Control Box</div>
        <div class="separator"></div>
        <div class="property">
          <div class="name">scale</div>
          <div
            class="ui-input-slider"
            data-topic="scale"
            data-unit="%"
            data-max="300"
            data-sensitivity="10"></div>
        </div>
        <div class="separator"></div>
        <div class="property">
          <div class="name">draggable</div>
          <div class="ui-checkbox" data-topic="drag-subject"></div>
        </div>
        <div class="property right">
          <div class="name">section height</div>
          <div
            class="ui-input-slider"
            data-topic="preview-area-height"
            data-min="400"
            data-max="1000"></div>
        </div>
      </div>

      <div id="preview_section" class="group section">
        <div id="subject">
          <div class="guideline" data-axis="Y" data-topic="slice-top"></div>
          <div class="guideline" data-axis="X" data-topic="slice-right"></div>
          <div class="guideline" data-axis="Y" data-topic="slice-bottom"></div>
          <div class="guideline" data-axis="X" data-topic="slice-left"></div>
        </div>
        <div id="preview"></div>
      </div>

      <!-- controls -->
      <div id="controls" class="group section">
        <!-- border-image-slice -->
        <div id="border-slice-control" class="category">
          <div class="title">border-image-slice</div>
          <div class="property">
            <div class="name">fill</div>
            <div class="ui-checkbox" data-topic="slice-fill"></div>
          </div>
        </div>

        <!-- border-image-width -->
        <div id="border-width-control" class="category">
          <div class="title">border-image-width</div>
        </div>

        <!-- border-image-outset -->
        <div id="border-outset-control" class="category">
          <div class="title">border-image-outset</div>
        </div>

        <!-- other-settings -->
        <div id="additional-properties" class="category">
          <div class="title">Additional properties</div>
          <div class="property">
            <div class="name">repeat-x</div>
            <div
              class="ui-dropdown border-repeat"
              data-topic="image-repeat-X"
              data-selected="1">
              <div data-value="0">stretch</div>
              <div data-value="0">repeat</div>
              <div data-value="0">round</div>
              <div data-value="0">space</div>
            </div>
          </div>
          <div class="property">
            <div class="name">repeat-y</div>
            <div
              class="ui-dropdown border-repeat"
              data-topic="image-repeat-Y"
              data-selected="1">
              <div data-value="1">stretch</div>
              <div data-value="1">repeat</div>
              <div data-value="1">round</div>
              <div data-value="1">space</div>
            </div>
          </div>
          <div class="property">
            <div
              class="ui-input-slider"
              data-topic="font-size"
              data-info="em size"
              data-unit="px"
              data-value="12"
              data-sensitivity="3"></div>
          </div>

          <div class="property">
            <div
              class="ui-input-slider"
              data-topic="preview-width"
              data-info="width"
              data-unit=" px"
              data-min="10"
              data-max="10000"
              data-sensitivity="3"></div>
          </div>
          <div class="property">
            <div
              class="ui-input-slider"
              data-topic="preview-height"
              data-info="height"
              data-unit=" px"
              data-min="10"
              data-max="10000"
              data-sensitivity="3"></div>
          </div>
        </div>

        <div id="output" class="category">
          <div class="title">
            CSS Code <button type="button" id="copy-css">Click to Copy</button>
          </div>
          <div class="css-property">
            <span class="name">border-image-slice: </span>
            <span id="out-border-slice" class="value"> =</span>
          </div>
          <div class="css-property">
            <span class="name"> border-image-width: </span>
            <span id="out-border-width" class="value"></span>
          </div>
          <div class="css-property">
            <span class="name">border-image-outset: </span>
            <span id="out-border-outset" class="value"></span>
          </div>
          <div class="css-property">
            <span class="name">border-image-repeat: </span>
            <span id="out-border-repeat" class="value"></span>
          </div>
          <div class="css-property">
            <span class="name">border-image-source: </span>
            <span id="out-border-source" class="value"></span>
          </div>
          <div class="css-property">
            <span class="name">border-style: </span>
            <span id="out-border-style" class="value">solid;</span>
          </div>
        </div>
      </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>
